<div class="layui-fluid" id="articles-table" lay-title="文章管理">
	<div class="layui-row layui-col-space10">
		<div class="layui-col-md10">
			<div class="layui-card">
				<div class="layui-card-body nepadmin-table-full">
					<div class="layui-btn-container nepadmin-pad-t10 nepadmin-pad-l10">
						<a lay-href="/edit/articles" target="" title="添加文章">
							<div class="layui-btn layui-btn-sm">添加文章</div>
						</a>
						<div class="layui-btn layui-btn-sm layui-btn-primary table-action" data-type="hidden">隐藏</div>
						<div class="layui-btn layui-btn-sm layui-btn-primary table-action" data-type="show">显示</div>
						<div class="layui-btn layui-btn-sm layui-btn-primary table-action" data-type="batchDelect">删除</div>
						<div class="layui-btn layui-btn-sm layui-btn-primary table-action" data-type="move">移动分类</div>
						<div class="layui-btn layui-btn-sm layui-btn-primary table-action" data-type="refresh">刷新页面</div>
					</div>
					<table id="articles-list" lay-filter="articles-list"></table>
				</div>
			</div>
		</div>
		<div class="layui-col-md2">
			<div class="layui-card">
				<div class="layui-card-header">筛选数据</div>
				<div class="layui-card-body">
					<form class="layui-row layui-col-space10 layui-form">
						<div class="layui-col-md12 layui-col-xs4">
							<input type="text" name="title" placeholder="输入关键字-模糊搜索" autocomplete="off" class="layui-input">
						</div>
						<div class="layui-col-md12 layui-col-xs4" id="nian">
						</div>
						<div class="layui-col-md12 layui-col-xs4">
							<select name="status">
								<option value="">显示状态</option>
								<option value="1">公开</option>
								<option value="2">隐藏</option>
							</select>
						</div>
						<div class="layui-col-md12 layui-col-xs4" id="cid">
						</div>
						<div class="layui-col-md12 layui-col-xs12">
							<div class="layui-row layui-col-space10">
								<div class="layui-col-xs6">
									<button class="layui-btn layui-btn-sm layui-btn-fluid" lay-submit lay-filter="articles-submit-form">筛选</button>
								</div>
								<div class="layui-col-xs6">
									<button type="reset" class="layui-btn layui-btn-sm layui-btn-fluid layui-btn-primary">重置</button>
								</div>
							</div>
						</div>
					</form>
				</div>
			</div>
			<!--
      <div class="layui-card nepadmin-font-12">
        <div class="layui-card-header">
          <i class="layui-icon">&#xe78c;</i> 帮助中心</div>
      </div>
      -->
		</div>
	</div>
	<script type="text/html" id="s_categorys">
		<select name="cid">
      <option value="">选择分类</option>
      {{#  layui.each(d, function(index, item){ }}
      <option value="{{ index }}">{{ item }}</option>
      {{#  }); }}
    </select>
  </script>
	<script type="text/html" id="s_nian">
		<select name="nian">
      <option value="">选择年份</option>
      {{#  layui.each(d, function(index, item){ }}
      <option value="{{ item.nian }}">{{ item.nian }}</option>
      {{#  }); }}
    </select>
  </script>
	<script type="text/html" id="TPL-articles-list-status">
		{{#
            var status = {
                1:{title:'公开',color:'blue'},
                2:{title:'隐私',color:'red'},
            }[d.status];
        }}
    <span class="layui-badge layui-bg-{{status.color}}">{{ status.title }}</span>
  </script>
</div>
<script>
	layui.use(['admin', 'table', 'form', 'dropdown', 'jquery', 'laytpl'], function(admin, table, form, dropdown, $,
		laytpl) {
		var view = $('#articles-table');
		var tableFilter = 'articles-list';

		// 拉取分类
		layui.categorys = [];
		admin.get({
			url: layui.api.categorys + 'getAll',
			async: false,
			success: function(result) {
				layui.categorys = result.data;
				let getTpl = document.getElementById('s_categorys').innerHTML,
					ciddom = document.getElementById('cid');
				if(layui.categorys){
				    laytpl(getTpl).render(layui.categorys, function(html) {
					   ciddom.innerHTML = html;
					   form.render('select', 'cid');
				    })
				}
			}
		});

		// 拉取年份
		admin.get({
			url: layui.api.articles + 'nian',
			async: false,
			success: function(result) {
				let getTpl = document.getElementById('s_nian').innerHTML,
					dom = document.getElementById('nian');
				if(result.data){
				    laytpl(getTpl).render(result.data, function(html) {
					   dom.innerHTML = html;
					   form.render('select', 'nian');
				    });
				}
			}
		});

		//
		// 时间戳要乘以1000，这里要使用毫秒时间戳
		//console.log(layui.util.toDateString(1584408303*1000));
		var cols = [
			[{
					title: '',
					type: 'checkbox',
					fixed: true,
					width: 60
				},
				{
					title: '操作',
					templet: '<p><span"><a onclick="layui.editArticles({{ d.aid }});"><i class="layui-icon layui-icon-edit-square" style="font-size: 25px;"></i></a></span></p>',
					width: 60
				},
				{
					title: '状态',
					templet: '#TPL-articles-list-status',
					width: 80
				},
				{
					title: '标题',
					field: 'title',
					minWidth: 300
				},
				{
					title: '关键词',
					field: 'keyword',
					minWidth: 180
				},
				{
					title: '分类',
					templet: '<p><b class="nepadmin-c-gray">{{# if(layui.categorys[d.cid]){ }} {{ layui.categorys[d.cid] }} {{# }else{ }}  {{# } }}</b></p>',
					align: 'center',
					width: 100
				},
				{
					title: '阅读数量',
					templet: '<p><b class="nepadmin-c-gray">{{d.readnum}}</b></p>',
					align: 'center',
					width: 90
				},
				{
					field: 'time',
					title: '发布时间',
					templet: '<p><span title="{{d.cdat}}" class="nepadmin-c-gray">{{ layui.util.timeAgo(d.cdat*1000)}}</span></p>',
					align: 'center',
					width: 170,
					sort: true
				}
			]
		];
		
		// 编辑
		layui.editArticles = function(id){
		   admin.navigate('/edit/articles/id='+id);
		}
		
		var operaUrl = layui.api.articles;
		var colsApi = operaUrl + 'list';
		var colsTable = cols;
		
		// 取缓存页数
        var storage = window.localStorage;
        var tablePage = storage.getItem(tableFilter);
		if(!tablePage){
		    tablePage = 1;
		}
		
		// 分类列表
		function getTable() {
			table.render({
				elem: '[lay-filter="' + tableFilter + '"]',
				url: colsApi,
				height: 'full-165',
				cols: colsTable,
				page: { curr: tablePage }
			});
		}
		getTable();
		// 提交搜索
		form.on('submit(articles-submit-form)', function(data) {
			var field = data.field;
			table.render({
				elem: '[lay-filter="' + tableFilter + '"]',
				url: colsApi,
				where: field,
				height: 'full-165',
				cols: colsTable
			});
			return false;
		});

		// 初始化表单
		form.render();

		// 操作
		function operation(type, data, msg) {
			if (!msg) {
				msg = '操作';
			}
			admin.post({
				url: operaUrl + type,
				data: data,
				success: function(result) {
					layer.alert(msg + '成功', {
						title: '操作提示',
						time: 0, //不自动关闭
						btn: ['确定'],
						yes: function(index) {
							layer.close(index);
							getTable();
						}
					});
				}
			});
		};

		// 多选操作
		view.find('.table-action').click(function() {
			let type = $(this).attr('data-type');
			if (type == 'refresh') {
				//刷新当前页
				getTable();
				//刷新一个指定页，不用传入页面的参数
				//layui.view.tab.refresh('/index')
				return false;
			}
			let data = table.checkStatus(tableFilter).data;
			let res = {};
			// 获取主键,即第一个值
			function getid(data) {
				for (var zid in data) {
					return zid;
				}
			}
			let idname = getid(data[0]);
			layui.each(data, function(index, item) {
				res[index] = item[idname];
			});
			let checkedCount = data.length;
			if (checkedCount == 0) {
				layer.msg('请先选择一行数据');
			} else {
			    if (type == 'move'){
				let nian_html = '';
				let getTpl = document.getElementById('s_categorys').innerHTML;
				 laytpl(getTpl).render(layui.categorys, function(html) {
					 nian_html = html;
				  });				
                   layer.open({
                    area: ['100px', '500px']
                    , title: '请选择分类'
                    , anim: 1 //0-6的动画形式，-1不开启
                    , content: '<form class="layui-row layui-col-space10 layui-form"><div class="layui-col-md12 layui-col-xs4" id="nian2">'+nian_html+'</div></form>'
                   , yes:function(){
				          type = 'move?id='+$("#nian2 option:selected").val();
						  operation(type, res);
				   }
				   });
				   form.render('select');
				   return false;
				}
				if (type == 'batchDelect') {
					layer.confirm('极度危险操作，删除后无法恢复数据', {
						skin: 'layui-layer-hong',
						title: '提示',
						btn: ['删了', '不删']
					}, function() {
						operation(type, res);
					}, function(index) {
						layer.close(index);
					})
				} else {
					operation(type, res);
				}
			}
		});

	});
</script>
